<template>
    <div class="qtLicense">
        <qtHeader fatherTitle="许可证" fatherCreate="创建新的" @tell='getName'></qtHeader>
      <el-row>
        <el-col :span="24">
          <el-table :data="tableData" stripe style="width: 100%" v-loading="loading" height="778px">
            <el-table-column prop="licenseName" label="许可证" width="150"></el-table-column>
            <el-table-column prop="productKey" label="产品密钥" width="350" ></el-table-column>
            <el-table-column prop="expire" label="密钥到期日期" width="150"></el-table-column>
            <el-table-column prop="manufacturersName" label="生产厂家" width="150"></el-table-column>
            <el-table-column prop="total" label="总数" width="150"></el-table-column>
            <el-table-column prop="remainder" label="剩余" width="150"></el-table-column>
            <el-table-column prop="purchasingDate" label="购买日期" width="150"></el-table-column>
            <el-table-column  label="购买成本" width="150">
              <template slot-scope="scope">￥{{scope.row.purchaseCost}}</template>
            </el-table-column>
            <el-table-column prop="licence" label="领用/归还" width="150">
              <template slot-scope="scope">
                <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">
                  <!-- <i class="el-icon-edit"></i> -->
                  查看
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button size="mini" type="warning" @click="handleEdit(scope.row)">
                  <i class="el-icon-edit"></i>
                </el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
                  <i class="el-icon-delete"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage1"
            :page-sizes="[15, 25, 35, 45]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </el-col>
    </el-row>
    <!-- 添加弹框 -->
    <el-dialog  :visible.sync="dialogFormVisible" width="800px"  center custom-class="dialogClass" @close="cancel">
      <el-form :model="form" ref="dataform">
        <el-form-item label="公司" :label-width="formLabelWidth" prop="companyvalue">
          <el-select v-model="form.companyvalue" placeholder="请选择公司">
            <el-option  v-for="item in company" :key="item.id" :value="item.id" :label="item.companies"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="许可证" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="产品密钥" :label-width="formLabelWidth" prop="productKey">
          <el-input v-model="form.productKey" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密钥到期日期" :label-width="formLabelWidth" prop="expire">
          <el-date-picker
            v-model="expire"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="资产类型" :label-width="formLabelWidth" prop="categoriesvalue">
          <el-select v-model="form.categoriesvalue" placeholder="请选择类型">
            <el-option v-for="item in categories" :key="item.name" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商" :label-width="formLabelWidth" prop="suppliervalue">
          <el-select v-model="form.suppliervalue" placeholder="请选择供应商">
            <el-option v-for="(item,index) in supplier" :key="index" :value="item.id" :label="item.suppliersName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="制造商" :label-width="formLabelWidth" prop="manufacturers">
          <el-select v-model="form.manufacturers" placeholder="请选择制造商">
            <el-option v-for="(item,index) in manufacturers" :key="index" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="总数" :label-width="formLabelWidth" prop="total">
          <el-input v-model="form.total" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="剩余" :label-width="formLabelWidth" prop="remainder">
          <el-input v-model="form.remainder" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="存放位置" :label-width="formLabelWidth" prop="place">
          <el-input v-model="form.place" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="订单号" :label-width="formLabelWidth" prop="orderNumber">
          <el-input v-model="form.orderNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="购买成本" :label-width="formLabelWidth" prop="price">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="笔记" :label-width="formLabelWidth" prop="notes">
          <el-input type="textarea" v-model="form.notes" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="购买日期" :label-width="formLabelWidth" prop="purchasingDate">
          <el-date-picker
            v-model="purchasingDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
    </div>
</template>
<script>
import qtHeader from '../components/header'
import { getLicense, getCompanies, getCategoriesName, getSuppliers, getManufacturersName, createLicense, delLicense, checkLicense } from '@/api/index.js'
export default {
  data () {
    return {
      tableData: [],
      dialogFormVisible: false,
      total: 10,
      page: 1,
      pageSize: 15,
      id: 1,
      currentPage1: 1,
      loading: false,
      form: {
        place: '', // 位置
        price: '', // 购买成本
        companyvalue: '',
        categoriesvalue: '',
        suppliervalue: '',
        name: '',
        productKey: '',
        total: '',
        remainder: '',
        orderNumber: '',
        notes: '',
        manufacturers: ''
      },
      supplier: [], // 供应商
      categories: [], // 资产类型
      company: [], // 公司
      formLabelWidth: '200px',
      purchasingDate: '', // 购买日期
      expire: '', // 到期日期
      manufacturers: [], // 制造商
      row: '',
      assetsId: ''
    }
  },
  components: {
    qtHeader
  },
  created () {
    this.getLicense()
  },
  methods: {
    getLicense () {
      this.loading = true
      getLicense({ page: this.page, pageSize: this.pageSize }).then(res => {
        this.tableData = res.data.data
        this.loading = false
        this.total = Number(res.data.total.total)
      })
    },
    getName (name) {
      this.dialogFormVisible = name
      // 弹窗中的公司
      getCompanies().then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          this.company = res.data.data
        }
      })
      // 弹框中的资产类型
      getCategoriesName().then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          this.categories = res.data.data
        }
      })
      // 弹窗的供应商
      getSuppliers().then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          this.supplier = res.data.data
        }
      })
      // 弹窗的制造商
      getManufacturersName().then(res => {
        console.log(res)
        if (res.data.code === 200) {
          this.manufacturers = res.data.data
        }
      })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getLicense()
    },
    handleCurrentChange (val) {
      this.page = val
      this.getLicense()
    },
    confirm () {
      var obj = {
        place: this.form.place,
        price: this.form.price,
        companyvalue: this.form.companyvalue,
        categoriesvalue: this.form.categoriesvalue,
        suppliervalue: this.form.suppliervalue,
        name: this.form.name,
        total: this.form.total,
        remainder: this.form.remainder,
        orderNumber: this.form.orderNumber,
        notes: this.form.notes,
        purchasingDate: this.purchasingDate,
        manufacturers: this.form.manufacturers,
        productKey: this.form.productKey,
        expire: this.expire
      }
      if (this.assetsId) {
        obj.id = this.assetsId
        if (this.row.savePlace !== this.form.place) {
          obj.place = this.form.place
        } else {
          obj.place = this.row.savePlace
        }
        if (this.row.purchaseCost !== this.form.price) {
          obj.price = this.form.price
        } else {
          obj.price = this.row.purchaseCost
        }
        if (this.row.purchasingDate !== this.purchasingDate) {
          obj.purchasingDate = this.purchasingDate
        } else {
          obj.purchasingDate = this.row.purchasingDate
        }
        if (this.row.cName !== this.form.name) {
          obj.componentsName = this.form.name
        } else {
          obj.componentsName = this.row.cName
        }
        if (this.row.total !== this.form.total) {
          obj.total = this.form.total
        } else {
          obj.total = this.row.total
        }
        if (this.row.remainder !== this.form.remainder) {
          obj.remainder = this.form.remainder
        } else {
          obj.remainder = this.row.remainder
        }
        if (this.row.orderNumber !== this.form.orderNumber) {
          obj.orderNumber = this.form.orderNumber
        } else {
          obj.orderNumber = this.row.orderNumber
        }
        if (this.row.notes !== this.form.notes) {
          obj.notes = this.form.notes
        } else {
          obj.notes = this.row.notes
        }
        if (!isNaN(this.form.manufacturers)) {
          obj.manufacturers = this.form.manufacturers
        } else {
          obj.manufacturers = this.row.manufacturersId
        }
        // console.log(obj)
        // 更新资产
        checkLicense(obj).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.msg)
            this.getLicense()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      } else {
        createLicense(obj).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.msg)
            this.getLicense()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }
      this.dialogFormVisible = false
    },
    handleDelete (row) {
      // console.log(row)
      this.$confirm('是否删除资产?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delLicense(row.id).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.msg)
          } else {
            this.$message.error(res.data.msg)
          }
          // 判断当删除的数据为当前页中的最后一条数据，刷新页面的时候需要把当前页码数减1
          if (this.total / this.pageSize - parseInt(this.total / this.pageSize) <= 0.1) {
            this.page = this.page - 1
          }
          this.getLicense()
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    cancel () {
      this.assetsId = ''
      this.$refs.dataform.resetFields()
      for (var key in this.form) {
        this.form[key] = ''
      }
      this.dialogFormVisible = false
      this.purchasingDate = ''
      this.expire = ''
    },
    handleEdit (row) {
      this.getName(name)
      this.row = row
      console.log(row)
      this.assetsId = row.id
      this.form.place = row.savePlace
      this.form.price = row.purchaseCost
      this.form.companyvalue = row.companiesId
      this.form.categoriesvalue = row.categoriesId
      this.form.suppliervalue = row.suppliersId
      this.form.name = row.licenseName
      this.form.total = row.total
      this.form.remainder = row.remainder
      this.form.orderNumber = row.orderNumber
      this.form.notes = row.notes
      this.purchasingDate = row.purchasingDate
      this.form.manufacturers = row.manufacturersName
      this.expire = row.expire
      this.form.productKey = row.productKey
    }
  }
}
</script>

<style lang="scss" scoped>
.qtLicense {
    padding: 10px;
}
</style>
